<template>
  <div v-if="showPopup" class="popup-box">
    <div class="popup-content">
      <div class="flex items-center justify-between p-x-30 p-y-16 title">
        <div class="font-size-22 color-1 font-weight-700">冲账退货</div>
        <div
          @click="showPopup = false"
          class="iconfont icon-guanbi font-size-22"
        ></div>
      </div>

      <div class="content">
        <w-table
          :data="list"
          :columns="columns"
          :pagination="pagination"
          @page-change="pageChange"
        >
        </w-table>
      </div>
      <div class="footer">
        <div class="left">
          <text>退货金额</text>
          <text class="color-price font-weight-700 ">￥</text>
          <text class="color-price font-weight-700 font-size-24">0.00</text>
        </div>
        <div class="right">
          <div>整单退款</div>
          <div>部分退款(0)</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import { useCommonStore } from "../../store/common";
const commonStore = useCommonStore();

const showPopup = ref(true);
const list = ref([]);
const columns = ref([
  {
    title: "商品信息",
    key: "name",
  },
  {
    title: "单价(元)",
    key: "code",
  },
  {
    title: "可退数量",
    key: "price",
  },
  {
    title: "金额(元)",
    key: "price",
  },
  {
    title: "本次退货数量",
    key: "price",
  },
]);

const emit = defineEmits(["confirm"]);

function open() {
  showPopup.value = true;
}
function close() {
  showPopup.value = false;
}

defineExpose({
  open,
  close,
});
</script>
<style lang="scss" scoped>
.popup-box {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 9999;
  background: rgba($color: #000000, $alpha: 0.3);
  // backdrop-filter: blur(20px);
  .popup-content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 830rpx;
    min-height: 600rpx;
    border-radius: 20rpx;
    background: $uni-text-color-inverse;
    // padding: 30rpx 40rpx;

    display: flex;
    flex-direction: column;

    .title {
      border-bottom: 1px solid $uni-border-color-1;
    }

    .content {
      flex: 1;
      height: 0;
      padding: 10rpx;
    }
    .footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid $uni-border-color-1;
      font-size: 18rpx;
      .left {
        margin-left: 40rpx;
      }
      .right {
        display: flex;

        > div {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          color: $uni-text-color-inverse;
          &:nth-child(1) {
            background: #f56c6c;
          }
          &:nth-child(2) {
            background: #e6a23c;
          }
        }
      }
    }
  }
}
</style>
